<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对核心浏览器
		 学习主体：针对页面操作比较多---DOM操作
		 JQuery操作DOM 理解：JQ框架改变页面内容效果
		 js基础就可以直接学习，了解函数使用
		 基础函数----事件源之后出现，事件源语法糖中
		 html()     作用：增加一个元素，覆盖原有html
		 vol()      作用：针对input元素，实现修改文本框内容
		 text()     作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A id delectus aliquam laboriosam ea, dignissimos et fugit, molestiae perferendis est itaque distinctio laborum molestias harum sunt, quasi rem velit sed.</p>
		
		<div style="width:200px;height:200px;background: #000;"></div>
		<h3>lorem</h3>
		
		<input type="button" value="按钮2" />
		<input type="text" />
		<script>
			$("button").click(function(){
			/*JQ操作DOM---html()函数使用*/
			$("p").html("<h1>JQ操作DOM-html函数使用</h1>")
			});
			/*练习1.div 200*200 背景颜色黑色，鼠标滑过之后
			下面内容修改：<h3>提示，修改为黄颜色
			*/
		   $("div").mouseenter(function(){
			  $("h3").html("<h3>黄颜色</h3>") 
		   });
		    /*练习2.：按钮  文本框  点击按钮，文本增加一行文本*/
			$("input[type='button']").click(function(){
				//alert("jq选择器是否选中");
				$("input[type='text']").val("文本框内容修改")
			});
			/*利用JQ操作DOM(页面效果)：1.元素内容操作 （3个函数）
			                          html()
									  val()
									  text()
			                          2.属性操作（4个函数）
									  <p align="center">
									  attr()
									  removeAttr()
									  prop()
									  removeProp()
									  3.样式类名操作（4个函数）
									  .demo{属性：属性值..}
									  addClass()
									  removeClass()
									  toggleClass()
									  hasClass()
									  4.元素样式操作（5个函数）
									  css()
									  width()和height()
									  outerWidth()和outerHeight()
									  语法：css("css属性"，"css属性值")
					                  attr("选择器").attr().addClass()
									  5.插入和删除修改操作（7个函数）
									  append()和prepend()
									  after()和before()
									  remove()和empty()
									  replaceWith()
									  6.元素遍历操作（6个函数）
									  7.JQ动画操作（7个函数）
									  
			*/
		</script>
	</body>
</html>